<template>
	<view class="zy-column-full">
		<view class="title" style="padding-top: 100rpx;">你的标签是？</view>
		<scroll-view class="zy-scroll" scroll-y style="padding: 0 50rpx;">
			<view class="cell">
				<view class="label">自我描述</view>
				<view class="cell-item">
					<view class="tag" :class="{'selected':1==item.isselect}" v-for="(item, index) in gxTags"
						@click="onItemClick(item, index)">{{item.name}}</view>
				</view>
			</view>
			<view class="cell">
				<view class="label">兴趣爱好</view>
				<view class="cell-item">
					<view class="tag" :class="{'selected':1==item.isselect}" v-for="(item, index) in xqTags"
						@click="onItemClick(item, index)">{{item.name}}</view>
				</view>
			</view>
		</scroll-view>
		<register-bottom top='20rpx' @next='next' style="margin: 20rpx 50rpx;"></register-bottom>
	</view>
</template>

<script>
	import RouteUtil from '@/common/RouteUtil.js';
	export default {
		data() {
			return {
				gxTags: [],
				xqTags: [],
				data: {
					sex: '',
					nick: '',
					birthday: '',
					heightId: '',
					weightId: '',
					careerId: '',
					incomeId: '',
					tagIds: '',
					educId: '',
					headPicId: '',
					prId: '',
					cityId: '',
					distId: '',
					passWord: '123456'
				},
			};
		},
		onLoad() {
			this.userId = uni.getStorageSync('userId');
			this.data = uni.getStorageSync('registerInfo');
			this.requestDict();
		},

		methods: {
			back() {
				uni.navigateBack();
			},
			next() {
				this.requestSave();
			},
			async requestDict() {
				let res = await this.$common.post("/app/user/getBiaoqian");
				if (0 == res.code) {
					let data = res.data;
					this.gxTags = data.gexing;
					this.xqTags = data.xingqu;
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},
			async requestSave() {
				let ids = '';
				let names = '';
				this.gxTags.forEach(item => {
					if (1 == item.isselect) {
						if ('' == ids) {
							ids = item.id;
							names = item.name;
						} else {
							ids += ',' + item.id;
							names += ',' + item.name;
						}
					}
				})
				this.xqTags.forEach(item => {
					if (1 == item.isselect) {
						if ('' == ids) {
							ids = item.id;
							names = item.name;
						} else {
							ids += ',' + item.id;
							names += ',' + item.name;
						}
					}
				})

				if ('' == ids) {
					this.$common.showToast('请选择')
					return
				}

				let res = await this.$common.post("/app/geren/upBiaoqian", {
					biaoqian: ids
				});
				if (0 == res.code) {
					this.$common.showToast('完善信息成功，欢迎进入')
					setTimeout(() => {
						uni.setStorageSync('login', true);
						RouteUtil.toHome()
					}, 500)
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},
			onItemClick(item, index) {
				item.isselect = item.isselect == 1 ? 2 : 1;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.title {
		font-weight: bold;
		font-size: 48rpx;
		color: #fff;
	}

	.cell {
		display: flex;
		flex-direction: column;
		background-color: rgba(#000, 0.2);
		border-radius: 15rpx;
		padding: 20rpx;
		margin: 20rpx;

		.label {
			font-size: 36rpx;
			color: #888;
		}

		.cell-item {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;

			.tag {
				padding: 10rpx 20rpx;
				background-color: #eee;
				border-radius: 50rpx;
				font-size: 24rpx;
				color: #555;
				margin: 10rpx;
			}

			.selected {
				background-image: linear-gradient(to right, #FDB175 5%, #F49C66 100%);
				color: #fff;
			}
		}
	}
</style>